<template>
  <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 引用面包屑导航组件 -->
        <breadcrumb>内容管理</breadcrumb>
      </div>
       <el-table
      :data="commentsData"
      v-loading="isloading"
      style="width: 100%">
      <el-table-column
        prop="title"
        label="文章标题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="total_comment_count"
        label="总评论数"
        width="180">
      </el-table-column>
      <el-table-column
       prop="fans_comment_count"
        label="粉丝评论数"
        width="180">
      </el-table-column>
      <el-table-column
        label="评论状态">
          <template slot-scope="scope">
            <!-- {{scope.row.comment_status}} -->
            <el-tag v-if="scope.row.comment_status">正常</el-tag>
            <el-tag v-else type="danger">关闭</el-tag>
          </template>
      </el-table-column>
      <el-table-column
        label="操作">
          <template slot-scope="scope">
          <el-button
          v-if="!scope.row.comment_status"
          type="primary"
            size="mini"
            @click="hToggle(scope.$index, scope.row)" :loading="isloading">打开评论</el-button>
          <el-button
          v-if="scope.row.comment_status"
          type="danger"
            size="mini"
            @click="hToggle(scope.$index, scope.row)" :loading="isloading">关闭评论</el-button>
      </template>
      </el-table-column>
    </el-table>
    <!-- 分页部分 -->
    <el-pagination
    :disabled="isloading"
      background
      layout="prev, pager, next"
      :total="totalCount"
      @current-change="hChangePage"
      >
    </el-pagination>
  </el-card>
</template>
<script>
export default {
  name: 'comments',
  data () {
    return {
      totalCount: 0,
      curPage: 1,
      isloading: false,
      commentsData: [
        { title: '', totalComments: '', fansComments: '', status: '' }
      ]
    }
  },
  created () {
    this.loadCommets()
  },
  methods: {
    async loadCommets () {
      // 1.发送请求
      try {
        const res = await this.$http({
          method: 'GET',
          url: '/mp/v1_0/articles',
          params: {
            page: this.curPage,
            response_type: 'comment'
          }
        })
        console.log('评论管理的数据', res)
        // 2.将获取的数据赋值给commentsData
        this.commentsData = res.data.data.results
        // 3.设置评论总数
        this.totalCount = res.data.data.total_count
      } catch (err) {
        console.log(err)
      }
    },
    // 分页切换页面
    hChangePage (CurPage) {
      // 1.更新当前页面
      // alert(CurPage)
      this.curPage = CurPage
      // 2.重新发送请求，渲染页面
      this.loadAticals()
    },
    // 打开关闭评论
    async hToggle (index, row) {
      console.log('111', index, '222', row)
      // 1.发送请求
      const res = await this.$http({
        method: 'PUT',
        url: '/mp/v1_0/comments/status',
        params: {
          article_id: row.id.toString()
        },
        data: {
          allow_comment: !row.comment_status
        }
      })
      console.log(res)
      // 2.将评论的状态取反
      row.comment_status = !row.comment_status
      this.isloading = false
    }
  }
}
</script>
<style scoped lang="less">
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
</style>
